import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

import { inscrement, decrement, addToNum } from './store/modules/counterStore'

import { fetchChanlList } from './store/modules/channelStore'

function App() {
  const { count } = useSelector(state => state.counter);
  const { channelList } = useSelector(state => state.channel);
  const dispatch = useDispatch();
  // 使用useEffect触发异步请求
  useEffect(() => {
    dispatch(fetchChanlList())
  }, [dispatch])


  return (
    <div>
      <h1>Redux counter</h1>
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(inscrement())}>+</button>
      <button onClick={() => dispatch(addToNum(10))}>addTo10</button>
      <button onClick={() => dispatch(addToNum(20))}>addTo20</button>
      <ul>
        {channelList.map(channel => <li key={channel.id}>{channel.name}</li>)}
      </ul>
    </div>
  )
}

export default App;